<template>
	<view class="material-detail">
		<!-- #ifdef APP-PLUS-->
		<view class="share-btn" @tap="showBtn">
			<!-- <i class="iconfont iconfenxiang"></i> -->
			分享
		</view>
		<!-- #endif -->
		<u-parse v-if="content" :imageProp="imageProp" :content="content" class="article-detail" />
		<mix-empty v-if="!content" :backgroundColor="'#fff'"></mix-empty>
		<uni-popup ref="share" :show="shareShow" :type="'bottom'" :custom="true" @change="unishareFun">
			<view class="uni-share">
				<view class="uni-share-title">分享到</view>
				<view class="uni-share-content">
					<view class="uni-share-content-box" @tap="shareContent('WXSceneSession')">
						<view class="uni-share-content-image">
							<view class="iconfont iconweixin shareImg"></view>
						</view>
						<view class="uni-share-content-text">微信好友</view>
					</view>
					<view class="uni-share-content-box" @tap="shareContent('WXSenceTimeline')">
						<view class="uni-share-content-image">
							<view class="iconfont shareImg iconpengyouquan"></view>
						</view>
						<view class="uni-share-content-text">朋友圈</view>
					</view>
				</view>
				<view class="uni-share-btn" @click="cancel()">取消分享</view>
			</view>
		</uni-popup>
		<loading></loading>
		<tui-modal></tui-modal>
	</view>
</template>

<script>
	import uParse from '@/components/gaoyia-parse/parse.vue'
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	import mixEmpty from '@/components/mix-empty/mix-empty.vue'
	export default {
		components: {
			uParse,
			uniPopup,
			mixEmpty
		},
		data() {
			return {
				id:'',
				content: '',
				title: '',
				shareShow:false,
				imageProp:{
					mode:'widthFix'
				}
			}
		},
		onLoad(options) {
			if (!this.$util.checkTokenAndInviterId(options)) {
				// 检查token和邀请人信息，无token退出方法
				return;
			}
			this.id = options.id;
			this.getDetail(this.id);
			
		},
		onShareAppMessage(res) {
			const str = this.content.replace(/<[^<>]+>/g, "");
			const id = this.id;
			return {
				title: this.title,
				path: `/packageC/pages/material/materialDetail?id=${id}`
			}
		},
		beforeDestroy() {
			// #ifdef H5
			this.$wechat.cleanShare();
			// #endif
		},
		methods: {
			getDetail(id) {
				this.$http.getMaterialDetail(id).then((res) => {
					if(res.status == 0) {
						//解决uparse不能把&nbsp转成空格
						this.content = res.data.materialArticle.replace(/&nbsp;/g, ' ');
						this.title = res.data.materialName;
						const str = this.content.replace(/<[^<>]+>/g, "").substring(0,100);
						// #ifdef H5
						this.$wechat.share({
							title:this.title, 
							desc:str, 
							link:`/packageC/pages/material/materialDetail?id=${id}`, 
							imgUrl:""
						});
						// #endif
					}
				})
			},
			showBtn(){
				this.shareShow = true;
			},
			cancel() {
				this.shareShow = false;
			},
			unishareFun(e) {
				console.log(e.show)
				this.shareShow = e.show;
			},
			shareContent(type) {
				const shareHref = this.$util.shareUrl();
				const str = this.content.replace(/<[^<>]+>/g, "");
				const id = this.id;
				// #ifdef APP-PLUS
				uni.share({
					provider: 'weixin',
					scene: type,
					type: 0,
					// summary: str,
					title:this.title,
					href: `${shareHref}packageC/pages/material/materialDetail?id=${id}`,
					success: function(res) {
						console.log('success:' + JSON.stringify(res));	
						uni.showToast({
							title: '分享成功'
						});
						uni.hideLoading();
					},
					fail: function(err) {
						uni.showToast({
							title: '分享失败'
						});
						uni.hideLoading();
					}
				})
				this.cancel();
				// #endif
			},
			//分享
			shareFun() {
				//提取富文本中的文本内容
				const str = this.content.replace(/<[^<>]+>/g, "");
				const shareHref = this.$util.shareUrl()
				this.$store.commit('setArticleDetail', str);
				this.$wechat.share({
					title: this.title,
					desc: str,
					link: `${shareHref}packageC/pages/material/materialDetail`,
					imgUrl: ''
				});
			},
		}
	}
</script>

<style lang="scss">
	.material-detail {
		background: #fff;
		padding:0 30rpx 30rpx;
		height: 100vh;

		.article-detail {
			.wxParse {
				height: calc(100vh - 40rpx);
				overflow: scroll;
				.p {
					padding-bottom: 0 !important;
				}
			}
		}

		.share-btn {
			position: fixed;
			top:30rpx;
			right: 32rpx;
			font-size: 50rpx;
			font-weight: 600;
			width: 100rpx;
			height: 50rpx;
			line-height:50rpx;
			border-radius: 25rpx;
			box-shadow: 0px 4rpx 16rpx 0px #ccc;
			text-align: center;
			color:#333;
			background-color: #fff;
			// background: #EA655E;
			z-index: 10000;
			font-size: 16px;
			.iconfont{
				font-size: 21px;
			}
		}
		/* 底部分享 */
		.uni-share {
			background: #fff;
			.uni-share-title {
				line-height: 60upx;
				font-size: 24upx;
				padding: 15upx 0;
				text-align: center;
			}
		
			.uni-share-content {
				display: flex;
				flex-wrap: wrap;
				padding: 15px;
			}
		
			.uni-share-content-box {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 25%;
				box-sizing: border-box;
			}
		
			.uni-share-content-image {
				display: flex;
				justify-content: center;
				align-items: center;
				// width: 60upx;
				// height: 60upx;
				overflow: hidden;
				border-radius: 10upx;
			}
		
			.shareImg {
				color: #07C160;
				font-size: 60rpx;
			}
		
			.uni-share-content-image .image {
				width: 100%;
				height: 100%;
			}
		
			.uni-share-content-text {
				font-size: 26upx;
				color: #333;
				padding-top: 5px;
				padding-bottom: 10px;
			}
		
			.uni-share-btn {
				height: 90upx;
				line-height: 90upx;
				border-top: 1px #f5f5f5 solid;
				text-align: center;
				color: #666;
			}
		}
	}
</style>
